{% load staticfiles %}
{% csrf_token %}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="{% static 'css/layui.css' %}">
        <link rel="stylesheet" href="{% static 'css/index.css' %}">
        <title>编写yaml</title>
    </head>
    <body style="height: 100%;">
        <div class="layui-per-left">
            <div class="layui-per-left-top">
                <div style="margin: 0;"><a style="font-size: 28px;"><i class="layui-icon" style="font-size: 28px;">&#xe60a;</i>返回结果</a><hr class="layui-bg-green" style="margin: 3px;"></div>
                <textarea id="returnstatus" name="returnstatus" placeholder="执行返回" class="layui-textarea layui-textarea-per-check" ></textarea>
            </div>
            <div id="perend" class="layui-per-left-end">
                <div class="layui-tab">
                    <ul class="layui-tab-title">
                        <li class="layui-this">shell执行</li>
                        <li id="yamllist">playbook执行</li>
                        <li id="yamlrules">rules执行</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <form id="formpershell" name="formpershell" class="layui-form layui-form-pane" >
                                <div class="layui-form-item layui-form-item-hosts">
                                    <label class="layui-form-label">Group</label>
                                    <div class="layui-input-inline">
                                        <select id="perlist" name="perlist" lay-filter="perlist" class="perlist">
                                        </select>
                                    </div>
                                    <div style="float: right;">
                                        <label class="layui-form-label">所属key</label>
                                        <div class="layui-input-inline" style="margin-right:0">
                                            <input id="perkey" type="text" name="perkey" autocomplete="off" placeholder="所属key" required lay-verify="required" class="layui-input perkey" disabled>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-text layui-form-item-hosts">
                                    <div class="layui-input-block">
                                        <textarea id="perip" name="perip" placeholder="所属IP" required lay-verify="required" class="layui-textarea perip" style="height: 60px; min-height: 60px" disabled></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-item-hosts">
                                    <div class="layui-select-ansible">
                                        <select id="ansibletype" name="ansibletype" lay-filter="ansibletype" >
                                            <option value="shell">shell</option>
                                            <option value="file">file</option>
                                            <option value="copy">copy</option>
                                        </select>
                                    </div>
                                    <div class="layui-input-block">
                                        <input id="pershell" type="text" name="pershell" autocomplete="off" required lay-verify="required" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-item-hosts">
                                    <button type="button" id="performshell" class="layui-btn layui-btn-warm layui-btn-per" lay-submit lay-filter="performshell">执行</button>
                                </div>
                            </form>
                        </div>
                        <div class="layui-tab-item">
                            <form id="formperplay" name="formperplay" class="layui-form layui-form-pane">
                                <div class="layui-form-item layui-form-item-hosts">
                                    <label class="layui-form-label">Group</label>
                                    <div class="layui-input-inline">
                                        <select id="perplaylist" name="perplaylist" lay-filter="perplaylist" class="perlist">
                                        </select>
                                    </div>
                                    <div style="float:right">
                                        <label class="layui-form-label">所属key</label>
                                        <div class="layui-input-inline" style="margin-right: 0;">
                                            <input id="perplaykey" type="text" name="perplaykey" autocomplete="off" placeholder="所属key" required lay-verify="required" class="layui-input perkey" disabled>
                                        </div>
                                    </div>

                                </div>
                                <div class="layui-form-item layui-form-text layui-form-item-hosts">
                                    <div class="layui-input-block">
                                        <textarea id="perplayip" name="perplayip" placeholder="所属IP" required lay-verify="required" class="layui-textarea perip" style="height: 60px; min-height: 60px" disabled></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-item-hosts">
                                    <label class="layui-form-label">选择剧本</label>
                                    <div style="width:180px; float: left;">
                                        <div class="layui-input-block" style="margin-left: 0;">
                                            <select id="perplaybook" name="perplaybook" lay-filter="perplaybook" >
                                            </select>
                                        </div>
                                    </div>
                                    <div  style="display: block; margin-left: 290px;">
                                        <input id="perpalyval" type="text" name="perpalyval" placeholder="动态变量" autocomplete="off" required lay-verify="required" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-item-hosts">
                                    <button type="button" id="performpaly" class="layui-btn layui-btn-warm layui-btn-per" lay-submit lay-filter="performpaly">执行</button>
                                </div>
                            </form>
                        </div>
                        <div class="layui-tab-item">
                            <form id="formperplay" name="formperplay" class="layui-form layui-form-pane">
                                <div class="layui-form-item layui-form-item-hosts">
                                    <label class="layui-form-label">Group</label>
                                    <div class="layui-input-inline">
                                        <select id="perrulelist" name="perrulelist" lay-filter="perrulelist" class="perlist">
                                        </select>
                                    </div>
                                    <div style="float: right;">
                                        <label class="layui-form-label">所属key</label>
                                        <div class="layui-input-inline" style="margin-right: 0;">
                                            <input id="perrulekey" type="text" name="perrulekey" autocomplete="off" placeholder="所属key" required lay-verify="required" class="layui-input perkey" disabled>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-text layui-form-item-hosts">
                                    <div class="layui-input-block">
                                        <textarea id="perruleip" name="perruleip" placeholder="所属IP" required lay-verify="required" class="layui-textarea perip" style="height: 60px; min-height: 60px" disabled></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-item-hosts">
                                    <label class="layui-form-label">rule执行</label>
                                    <div class="layui-input-block">
                                        <input id="perruletag" type="text" name="perruletag" placeholder="选择标签" autocomplete="off" required lay-verify="required" class="layui-input" style="width:180px; float:left;">
                                        <div style="display: block; margin-left: 182px;">
                                            <input id="perruleval" type="text" name="perruleval" placeholder="动态变量" autocomplete="off"  class="layui-input">
                                        </div>
                                    </div>
{#                                    <input id="perrule" type="text" name="perrule" placeholder="yml目录" autocomplete="off" required lay-verify="required" class="layui-input">#}
                                </div>
                                <div class="layui-form-item layui-form-item-hosts">
                                    <label class="layui-form-label">yml目录</label>
                                    <div class="layui-input-block">
                                        <input id="perrulefile" type="text" name="perrulefile" placeholder="yml目录" autocomplete="off" required lay-verify="required" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-item-hosts">
                                    <button type="button" id="performrule" class="layui-btn layui-btn-warm layui-btn-per" lay-submit lay-filter="performrule">执行</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-per-main"></div>
        <div class="layui-per-right">
            <div class="layui-right-top">
                <div style="margin: 0;">
                    <a style="font-size: 28px;"><i class="layui-icon" style="font-size: 28px;">&#xe60a;</i>历史记录</a>
                    <form class="layui-form layui-form-pane" action="">
                        <div class="layui-form-item layui-right-select">
                             <div class="layui-input-block">
                                  <select name="interest" lay-filter="typeselect">
            {#                        <option value="">请选择类别</option>#}
                                    <option value="1"  selected="">shell</option>
                                    <option value="2">playbook</option>
                                    <option value="3">rules</option>
                                  </select>
                             </div>
                        </div>
                    </form>
                   <hr class="layui-bg-green" style="margin: 3px;">
                </div>
            </div>
            <div id="alltb" class="layui-right-bottom">
                <div id="shelltb" class="history-table">
                    <table class="layui-table-shell" id="shelltable" lay-filter="shelltable"></table>
                </div>
                <div id="playbooktb" class="history-table layui-hide">
                    <table class="layui-table-play" id="playtable" lay-filter="playtable"></table>
                </div>
                <div id="ruletb" class="history-table layui-hide">
                    <table class="layui-table-rule" id="ruletable" lay-filter="ruletable"></table>
                </div>
            </div>

        </div>
    </body>

    <script src="{% static 'layui.all.js' %}"></script>
    <script type="text/html" id="shellDemo">
            <a class="layui-btn layui-btn-xs" lay-event="check">查看</a>
    </script>
    <script type="text/html" id="palyDemo">
            <a class="layui-btn layui-btn-xs" lay-event="check">查看</a>
    </script>
    <script type="text/html" id="ruleDemo">
            <a class="layui-btn layui-btn-xs" lay-event="check">查看</a>
    </script>

    <script>
        var group_list = {{ group_list|safe }};
        var yaml_list = {{ yaml_list|safe }};
    </script>
    <script src="{% static 'js/automation/yamlperform.js' %}"></script>
</html>